<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="对接设置">
        <Row>
            <BoxCell title="入库单号">{{data.code}}</BoxCell>
            <BoxCell title="所属客户">{{data.customer.name}}</BoxCell>
            <BoxCell title="入境关区">
                <RemoteSpan url="common/select/customs" v-model="data.district"></RemoteSpan>
            </BoxCell>
            <BoxCell title="进境类型">
                <RemoteSpan type="type" v-model="data.type"></RemoteSpan>
            </BoxCell>
            <BoxCell title="运输方式">
                <RemoteSpan type="transport" v-model="data.transport"></RemoteSpan>
            </BoxCell>
            <BoxCell title="货物总价值">
                <span>{{data.price.toLocaleString()}} RMB</span>
            </BoxCell>
            <BoxCell title="货物重量">
                <span>{{data.weight.toLocaleString()}} KG</span>
            </BoxCell>
            <BoxCell title="货物件数">
                <span>{{data.piece}}</span>
                <RemoteSpan type="packings" v-model="data.packing_code"></RemoteSpan>
            </BoxCell>
            <BoxCell title="产品个数">
                <span>{{data.product_count.toLocaleString()}} 个</span>
            </BoxCell>
            <BoxCell title="状态">
                <span v-if="data.status === 0">草稿</span>
                <span v-if="data.status === 1">待审核</span>
                <span v-if="data.status === 2">审核失败</span>
                <span v-if="data.status === 3">已审核</span>
                <span v-if="data.status === 4">已到货</span>
                <span v-if="data.status === 5">完成</span>
            </BoxCell>
            <BoxCell title="创建时间">{{data.created_at}}</BoxCell>
            <BoxCell title="最后修改时间">{{data.updated_at}}</BoxCell>
        </Row>

        <Tabs value="logs">
            <TabPane label="日志" name="logs">
                <Logs v-model="data.logs"></Logs>
            </TabPane>
            <TabPane label="产品"  name="products">
                <Products v-model="data.products"></Products>
            </TabPane>
            <TabPane label="文件"  name="files">
                <Files v-model="data.files"></Files>
            </TabPane>
            <TabPane label="理货单" name="tally">
                <Tally v-model="data.tally"></Tally>
            </TabPane>
        </Tabs>

        <div slot="footer">
            <Button type="success" v-if="data.status === 1 || data.status === 3 || data.status === 4" @click="windowForTemplate">核柱清单</Button>
            <Button type="error" v-if="data.status === 4" @click="windowForTally">导出理货单</Button>
            <Button type="error" v-if="data.status === 5" @click="windowForTally">导出理报告</Button>
            <Button type="info" v-if="data.status === 5" @click="windowForBatch">导出批次报告</Button>
            <Button icon="md-arrow-round-up" @click="openComponent('UploadFiles', {url: `warehousing/index/${props.id}/files`})">上传附件</Button>
            <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
        </div>

        <component :is="componentProps.view" v-model="componentProps.value" :props="componentProps.props" @input="getData"></component>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import UploadFiles from "../../../components/content/uploadFiles";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IDrawer from "../../../components/content/drawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import RemoteSpan from "../../../components/content/remoteSpan";
    import BoxCell from "../../../components/content/boxCell";
    import Logs from "../../../components/content/logs";
    import Products from "../../../components/content/products";
    import Files from "./files";
    import component from "../../../mixins/component";
    import FileSaver from 'file-saver';
    import Tally from "./tally";

    export default {
        name: "iiview",
        mixins: [contentDrawer, component],
        components: {Tally, Files, Products, Logs, BoxCell, RemoteSpan, RemoteSelect, IForm, IDrawer, UploadFiles},
        data() {
            return {
                data: {price: 0, product_count: 0, weight: 0, customer: {name: ''}, products: [], logs: [], tally: []}
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.loading = true;
                this.$http.get(`warehousing/index/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            windowForTemplate(){
                this.loading = true;
                this.$http.download(`warehousing/index/${this.props.id}/window-template`).then((res) => {
                    FileSaver.saveAs(res, `入库单号[${this.data.code}]的核注清单模板.xlsx`);
                }).finally(() => {
                    this.loading = false;
                });
            },
            windowForTally(){
                this.loading = true;
                this.$http.download(`warehousing/index/${this.props.id}/window-tally`).then((res) => {
                    FileSaver.saveAs(res, `入库单号[${this.data.code}]的理货模板.xlsx`);
                }).finally(() => {
                    this.loading = false;
                });
            },
            windowForBatch(){
                this.loading = true;
                this.$http.download(`warehousing/index/${this.props.id}/window-batch`).then((res) => {
                    FileSaver.saveAs(res, `入库单号[${this.data.code}]的收货模板.xlsx`);
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
